<template>
	<view class="h_100 bg-white p-4">
		<view class="font_36">当前账号</view>
		<view class="py-2 flex justify-between">
			<text class="user_phone">{{ userName }}</text>
			<view class="flex edit_text align-end" @click="goPages('./edit_username')">
				<u-icon name="edit-pen-fill" color="#5072EF" size="28"></u-icon>
				<text class="font_36">修改</text>
			</view>
		</view>
		<u--form :model="from" :rules="rules" ref="from">
			<u-form-item prop="newPassword" ref="newPassword">
				<view class="wsd_input c_9 h4 mt-3">
					<u-input class="wsd_input common" placeholder="请输入新密码" border="none" maxlength="16" v-model="from.newPassword" clearable :password="isPwd ? false : true">
						<template slot="suffix">
							<u-icon :name="isPwd ? 'eye' : 'eye-off'" color="#999999" size="25" @click="pwdChange"></u-icon>
						</template>
					</u-input>
				</view>
			</u-form-item>
		</u--form>

		<button class="next_btn common h4 text-white mt-3" @click="nextBtn">下一步</button>
	</view>
</template>

<script>
import { userShowAccount } from '@/api/my/safety.js';
export default {
	data() {
		return {
			userName: '',
			phone:'',
			from: {
				newPassword: ''
			},
			rules: {
				newPassword: [
					{
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change']
					},
					// {
					// 	type: 'string',
					// 	required: true,
					// 	min: 6,
					// 	max: 14,
					// 	message: '密码长度应为6-14位之间',
					// 	trigger: ['blur']
					// },
					{
						type: 'string',
						required: true,
						message: '密码应为字母，数字组合，6-14位',
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/,
						trigger: ['blur']
					}
				]
			},
			isPwd: false
		};
	},
	onReady() {
		this.$refs.from.setRules(this.rules);
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			userShowAccount({ token: uni.getStorageSync('userInfo').token || '' })
				.then(res => {
					if (res.code == 0) {
						this.userName = res.user_name;
						this.phone = res.phone
					} else {
						uni.$u.toast(res.msg);
						if (res.msg == '请先登录') {
							this.toLogin();
						}
					}
				})
				.catch(err => {
					console.log('获取账号失败', err);
				});
		},
		nextBtn() {
			this.$refs.from
				.validate()
				.then(e => {
					// console.log('==');
					this.goPages('./verify_phone?psd=' + this.from.newPassword + '&phone='+ this.phone);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 密码显示/隐藏
		pwdChange() {
			this.isPwd = !this.isPwd;
		}
	}
};
</script>

<style lang="scss" scoped>
.user_phone {
	font-size: 72rpx;
}
.edit_text {
	color: #5072ef;
	padding: 20rpx 0;
}
.common {
	width: 100%;
	height: 98rpx;
	border-radius: 49rpx;
	line-height: 98rpx;
}
.wsd_input {
	width: 100%;
	background: #f5f5f5;
	padding: 0 50rpx;
	border-radius: 49rpx;
}
.next_btn {
	background: #cd1a2d;
}
::v-deep .u-input__content {
	height: 98rpx;
	border-radius: 49rpx;
}
</style>
